<template>
	<!-- banner -->
	<div class="color">
		<div class="tap">
			<div class="Headportrait">
				<img src="666.jpg" alt="">
			</div>
			<p>小明</p>
			<span>编辑资料</span>

			<div class="tt">
				<h2>1</h2>
				<p>头条</p>
			</div>

			<div class="hz">
				<h2>3</h2>
				<p>获赞</p>
			</div>

		</div>
		<!-- 中 -->
		<div class="scls">
			<div class="xx">
				<van-icon name="star-o" />
				<p>收藏</p>
			</div>
			<div class="xz">
				<van-icon name="underway-o" />
				<p>历史</p>
			</div>
		</div>
		<!-- 单元格 -->
		<div class="main">
			<van-cell title="修改密码" is-link />
			<van-cell title="联系我们" is-link />
			<van-cell title="关于我们" is-link />
		</div>
		<div class="dl">
			<van-button type="primary" size="large">退出登录</van-button>
		</div>


		<van-tabbar v-model="active">
			<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
			<van-tabbar-item icon="add-o" to="publish">发布</van-tabbar-item>
			<van-tabbar-item icon="manager-o" to="myview">我的</van-tabbar-item>
		</van-tabbar>
	</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 2
			}
		}
	}
</script>

<style scoped lang="less">
	* {
		margin: 0;
		padding: 0;
	}

	.color ::v-deep .tap {
		width: 100%;
		height: 200px;
		background: url('../../public/banner.jpg')no-repeat;
		background-size: 145%;
		position: relative;
	}

	.Headportrait {
		width: 70px;
		height: 70px;
		position: absolute;
		left: 15px;
		top: 40px;
	}

	.Headportrait>img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.tap>p {
		color: #fff;
		position: absolute;
		font-size: 20px;
		left: 100px;
		top: 60px;
	}

	.tap>span {
		position: absolute;
		width: 80px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		border-radius: 20px;
		border: none;
		right: 20px;
		top: 65px;
		background-color: #fff;
	}

	.tap ::v-deep .hz,
	.tap ::v-deep .tt {
		position: absolute;
		color: #fff;
		width: 100px;
		height: 50px;
		bottom: 20px;
		text-align: center;
	}

	.tap ::v-deep .tt {
		left: 40px;
	}

	.tap ::v-deep .hz {
		right: 40px;
	}
	// .top ::v-deep h2 {
	// 	font-size: 18px;
	// 	font-weight: 200;
	// 	margin: 0;
	// 	padding: 0;
	// 	position: ;
	// }

	// .tt {
	// 	bottom: 10px;
	// 	left: 1px;
	// 	position: absolute;
	// }

	.color ::v-deep .scls {
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		margin-top: -10px;
	}

	.scls ::v-deep .xx,
	.scls ::v-deep .xz {
		width: 49%;
		height: 50px;
		font-size: 16px;
		text-align: center;
		margin-top: 10px;
	}

	.xx .van-icon {
		color: #F09197;
		font-size: 30px;
	}

	.xz .van-icon {
		color: #ffb771;
		font-size: 30px;
	}

	.main {
		width: 100%;
		margin-top: 10px;

	}

	.main ::v-deep .van-cell {
		font-size: 15px;
		margin: 1px 0;
		padding: 0 10px;
		line-height: 40px;
	}

	.dl .van-button {
		background-color: #fff;
		border: none;
		color: #F09197;
		margin-top: 10px;
	}

	.color {
		background-color: #f7f8fa;
	}

	.scls {
		background-color: #fff;
		height: 85px;
	}
</style>
